             
        
<div style="width:50%;padding:10px" ng-animate=" 'animate' ">
<h2>Chemical Entry Form</h2>
  <form role="form">

		<div class="form-group">
			<select class="form-control" ng-model="cleaningService" ng-options="item.name for item in cleaningServices"></select>
		</div>
		<div class="form-group">
      		<input type="text" class="form-control" id="brd" placeholder="Cleaning Area" ng-model="cleaningArea">
    	</div>
    	<div class="form-group">
    		<input type="text" class="form-control" id="model" placeholder="Application" ng-model="application">
    	</div>
    	<div class="form-group">
    		<input type="text" class="form-control" id="origin" placeholder="Proposed Brand" ng-model="proposedBrand">
    	</div>
    	<div class="form-group">
      		<input type="text" class="form-control" id="rt" placeholder="Proposed Chemical" ng-model="proposedChemical">
    	</div>
    	<div class="form-group">
      		<input type="text" class="form-control" id="ac" placeholder="Dilution Ratio" ng-model="dilutionRatio">
    	</div>
    	<div class="form-group">
      		<input type="text" class="form-control" id="ctl" placeholder="Area Coverage [sq.mtr/ltr]" ng-model="areaCoverage">
    	</div>
    	<div class="form-group">
      		<input type="text" class="form-control" id="ctl" placeholder="Origin" ng-model="origin">
    	</div>
    	<div class="form-group">
      		<input type="text" class="form-control" id="ctl" placeholder="Certification" ng-model="certification">
    	</div>
    	<div class="form-group">
      		<input type="text" class="form-control" id="ctl" placeholder="Packing" ng-model="packing">
    	</div>
    	<div class="form-group">
      		<input type="text" class="form-control" id="ctl" placeholder="Total Area Coverage/ltr" ng-model="totalAreaCoverage">
    	</div>
    <button type="submit" class="btn btn-default" ng-click="submitChemical()">Submit</button>
    
  </form>
</div>
<div class="box">
                                <div class="box-header">
                                    <h3 class="box-title">Chemicals List</h3>
                                    <div style="padding-top:2px;padding-right:9px" class="col-xs-2 pull-right">
							        	<input type="search" placeholder="Search" class="form-control" ng-model="searchText">
    								</div>
                                </div><!-- /.box-header -->
                                <div class="box-body table-responsive" ng-if="chemicalsList.length>0">
                                    <table id="example1" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>Cleaning Service</th>
                                                <th>Cleaning Area</th>
                                                <th>Application</th>
                                                <th>Proposed Brand</th>
                                                <th>Proposed Chemical</th>
                                                <th>Dilution Ratio</th>
                                                <th>Area Coverage</th>
                                                <th>Origin</th>
                                                <th>Certification</th>
                                                <th>Packing</th>
                                                <th>Total Area Coverage</th>
                                                <th>Delete</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="chemical in chemicalsList | filter:searchText">
                                                <td>{{chemical.cleaningService}}</td>
                                                <td>{{chemical.cleaningArea}}</td>
                                                <td>{{chemical.application}}</td>
                                                <td>{{chemical.proposedBrand}}</td>
                                                <td>{{chemical.proposedChemical}}</td>
                                                <td>{{chemical.dilutionRatio}}</td>
                                                <td>{{chemical.areaCoverage}}</td>
                                                <td>{{chemical.origin}}</td>
                                                <td>{{chemical.certification}}</td>
                                                <td>{{chemical.packing}}</td>
                                                <td>{{chemical.totalAreaCoverage}}</td>
                                                <td>
                                                	<button class="btn btn-primary btn-sm btn-danger" ng-click="deleteChemical(chemical.uuid,$index)">Delete</button>
												</td>
                                            </tr>
                                        </tbody>
                                        
                                    </table>
                                </div><!-- /.box-body -->
                            </div><!-- /.box -->